<!--  -->
<template>
    <div class="smalbox" @click="pagetiao">
      <div class="lefttt">
        <img :src="srcdata">
      </div>
      <div class="rig">
        <h5 class="koko">{{ tita }}</h5>
        <div>
          <div class="xixi koko">凤凰卫视 5分钟前 </div>
          <div class="jj koko">
            <el-icon style="font-size: 12px;">
              <Share />
            </el-icon>分享
          </div>
        </div>
      </div>
    </div>
</template>

<script setup lang='js'>
import { ref, reactive } from 'vue'
import { useRouter } from "vue-router";
const router = useRouter();

function pagetiao() {
 const pageid =  getRandomIntInclusive(1,3)
 router.push("/detial/"+pageid)
}
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
const props = defineProps({
  tita: {

  },
  srcdata: {

  }
})
</script>

<style  scoped>
.smalbox {
  border-bottom: 1px solid rgb(185, 197, 224);
  width: 697px;
  height: 150px;
  margin-top: 17px;
}

.lefttt {
  float: left;
  width: 220px;
  height: 130px;
  overflow: hidden;
}

.lefttt img {
  width: 100%;
  height: 100%;
  transition: all .3s;
}

.lefttt:hover img {
  transform: scale(1.2);
}

.rig {
  float: left;
  width: 470px;
  height: 130px;
}

.rig h5 {
  padding: 10px;
  font-size: 20px;
  font-weight: 500;
}

.rig>div {
  margin-top: 39px;
  font-size: 12px;
  padding: 0 6px;
}

.xixi {
  float: left;
}

.jj {
  float: right;
}

.koko:hover {
  color: rgb(0, 134, 247);
}
</style>
